<template>
  <a-modal title="城市配置" width="100%" :footer="null" :visible="visible" @cancel="handleCancel">
    <div class="card-flex">
      <a-card title="配置列表" :bordered="true">
       <div style="display: flex;">
        <BaseSearch :search="searchProps1" @searchData="updateTable1" @resetData="updateTable1" />
        <a-button style="margin-left: 20px;" type="primary" @click="handleHit" :disabled="selectedRows.length === 0" ghost>批量屏蔽</a-button>
        <a-button style="margin-left: 20px;" type="primary" @click="handleHit2" :disabled="selectedRows.length === 0" ghost>批量开通</a-button>
       </div>
        <BaseTable :loading="loading1" :columns="columns1" :dataSource="dataSource1" :pagination="false"  :selectedRows.sync="selectedRows">
          <template slot="operation" slot-scope="{ record }">
            <span class="primary" @click="handleOpen(record)">开通</span>
            <a-divider v-if="record.provinceName !== '全国'" type="vertical" />
            <span v-if="record.provinceName !== '全国'" class="red" @click="handleMask(record)">屏蔽</span>
          </template>
        </BaseTable>
        <div v-show="dataSource1.length > 0" class="page-footer">
          <BasePaginationMax :page-key.sync="pageKey1" :get-list="tableInit1" />
        </div>
      </a-card>
      <a-card title="已开通城市" :bordered="true">
        <BaseSearch :search="searchProps2" @searchData="updateTable2" @resetData="updateTable2" />
        <BaseTable :loading="loading2" :columns="columns2" :dataSource="dataSource2" :pagination="false">
          <template slot="operation" slot-scope="{ record }">
            <span class="red" @click="handleDelete(record.id)">删除</span>
          </template>
        </BaseTable>
        <div v-show="dataSource2.length > 0" class="page-footer">
          <EasyPagination :page-key.sync="pageKey2" :get-list="tableInit2" />
        </div>
      </a-card>
    </div>
  </a-modal>
</template>

<script>
import { searchProps1, columns1, searchProps2, columns2 } from './option.js';
import * as Ajax from '@/api/institution';
export default {
  props: {
    visible: {
      type: Boolean,
    },
    isUpdate: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
    },
  },
  data() {
    return {
      loading1: true,
      searchProps1,
      searchForm1: {},
      columns1,
      dataSource1: [],
      pageKey1: {
        pageSize: 10,
        total: 1,
        current: 1,
      },
      loading2: true,
      searchProps2,
      searchForm2: {},
      columns2,
      dataSource2: [],
      pageKey2: {
        pageSize: 10,
        total: 1,
        current: 1,
      },
      selectedRows: [],
      clueIdList: [],
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.tableInit1();
        this.tableInit2();
      } else {
        this.dataSource1 = [];
        this.dataSource2 = [];
      }
    },
    isUpdate() {
      this.updateTable2();
    },
  },
  methods: {
    handleDelete(id) {
      Ajax.deletePlanCityList({ id })
        .then(({ success }) => {
          if (success) {
            this.$message.success('删除成功');
            this.tableInit2();
          }
        });
    },
    handleHit(){
      this.clueIdList = []
      this.selectedRows.forEach(item => {
        this.clueIdList.push({
          provinceName:item.provinceName,
          cityName:item.cityName
        })
      })
      this.$emit('mask_list', this.clueIdList);

    },
    handleHit2(){
      this.clueIdList = []
      this.selectedRows.forEach(item => {
        this.clueIdList.push({
          provinceName:item.provinceName,
          cityName:item.cityName
        })
      })
      this.$emit('mask_list2', this.clueIdList);

    },
    handleOpen(data) {
      const { provinceName, cityName } = data;
      this.$emit('open', { provinceName, cityName });
    },
    handleMask(data) {
      const { provinceName, cityName } = data;
      // console.log(provinceName, cityName)
      this.$emit('mask', { provinceName, cityName });
    },
    updateTable1(params = {}) {
      this.searchForm1 = { ...params };
      this.pageKey1 = this.$options.data().pageKey1;
      this.tableInit1();
    },
    // table 初始化
    tableInit1() {
      this.loading1 = true;
      const { current, pageSize } = this.pageKey1;
      const params = { pageNum: current, pageSize, ...this.searchForm1 };
      Ajax.getPlanCityList(params)
        .then((res) => {
          const { data, totalCount } = res;
          this.dataSource1 = Array.isArray(data) ? data : [];
          this.pageKey1.total = totalCount;
        })
        .finally(() => {
          this.loading1 = false;
        });
    },
    updateTable2(params = {}) {
      this.searchForm2 = { ...params };
      this.pageKey2 = this.$options.data().pageKey2;
      this.tableInit2();
    },
    // table 初始化
    tableInit2() {
      this.loading2 = true;
      const { current, pageSize } = this.pageKey2;
      const params = { pageNum: current, pageSize, ...this.searchForm2, planId: this.id };
      Ajax.getPlanCityList1(params)
        .then((res) => {
          const { data, totalCount } = res;
          this.dataSource2 = Array.isArray(data) ? data : [];
          this.pageKey2.total = totalCount;
        })
        .finally(() => {
          this.loading2 = false;
        });
    },
    handleCancel() {
      this.searchForm1 = {};
      this.pageKey1 = this.$options.data().pageKey1;
      this.dataSource1 = [];
      this.searchForm2 = {};
      this.pageKey2 = this.$options.data().pageKey2;
      this.dataSource2 = [];
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.card-flex {
  display: flex;

  &>div {
    &:first-child {
      flex: 1;
      margin-right: 20px;
    }

    &:last-child {
      flex: 1;
    }
  }
}

.table-wrap {
  margin-top: 16px;
}

.table-top-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.table-title {
  flex: 1;

  span {
    line-height: 32px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: block;
      width: 3px;
      height: 18px;
      background-color: #1890ff;
      margin-right: 8px;
      position: relative;
      top: -1px;
    }
  }
}

.standard-table {
  width: 100%;
  // overflow: hidden;
}

::v-deep .search-item,
::v-deep .search-button {
  margin-bottom: 6px !important;
}
</style>
